<template>
  <div class="fill-q">
    <n-collapse :default-expanded-names="isOpen">
      <n-collapse-item name="1">
        <template #arrow>
          <n-icon>
            <flash-icon />
          </n-icon>
        </template>
        <template #header>
          <div class="index" v-if="props.index">{{ props.index + '.' }}</div>
          <div class="content">
            <n-thing content-indented>
              <template #header v-if="formData.title">
                <div class="title">
                  <span
                    v-show="formData.required === '必填'"
                    style="color: red"
                  >
                    *
                  </span>
                  {{ formData.title }}
                </div>
              </template>
              <template #description v-if="formData.remark">
                <div class="remark">
                  {{ '——' + formData.remark }}
                </div>
              </template>
              <n-input-group>
                <n-input
                  style="min-width: 30vw"
                  disabled
                  placeholder="点击右侧按钮获取定位"
                />
                <n-button disabled>获取定位</n-button>
              </n-input-group>
            </n-thing>
          </div>
        </template>

        <span>
          <n-space vertical class="edit">
            <n-form
              :model="formData"
              ref="formRef"
              label-placement="top"
              :rules="rules"
              :label-width="160"
              :style="{
                maxWidth: '640px',
              }"
            >
              <n-form-item label="标题" path="title">
                <n-input
                  placeholder="标题"
                  v-model:value="formData.title"
                  @change="upT"
                />
              </n-form-item>
              <n-form-item label="是否必填" path="required">
                <n-radio-group
                  v-model:value="formData.required"
                  name="是否必填"
                >
                  <n-radio value="必填" @change="handleRadioChange"
                    >必填</n-radio
                  >
                  <n-radio value="非必填" @change="handleRadioChange"
                    >非必填</n-radio
                  >
                </n-radio-group>
              </n-form-item>
              <n-form-item label="提示" path="remark">
                <n-input
                  placeholder="提示"
                  v-model:value="formData.remark"
                  @change="upR"
                />
              </n-form-item>
            </n-form>
          </n-space>
        </span>
      </n-collapse-item>
    </n-collapse>
  </div>
</template>

<script setup lang="ts">
import { LocationSharp as FlashIcon } from '@vicons/ionicons5';
import { ref, reactive, computed } from 'vue';
const rules = {
  title: {
    required: true,
    message: '请输入标题',
    trigger: ['blur'],
  },
};
// 父组件传来的数据
const props = defineProps({
  index: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    required: true,
  },
  required: {
    type: String,
    default: '非必填',
  },
  remark: {
    type: String,
    default: '',
  },
  open: {
    type: Boolean,
    default: false,
  },
});
// 是否开启
const isOpen = ref(props.open !== true ? null : ['1']);

// 暂存数据
const formData: any = reactive({
  title: props.title,
  remark: props.remark,
  required: props.required,
});

// 双向数据绑定，子组件emit
const emit = defineEmits(['update:title', 'update:remark', 'update:required']);
const upT = (value: string) => {
  emit('update:title', value);
};
const upR = (value: string) => {
  emit('update:remark', value);
};
const upN = (value: string) => {
  emit('update:required', value);
};
const handleRadioChange = (e: any) => {
  formData.required = e.target.value;
  upN(e.target.value);
};
const formRef = ref(null);
</script>

<style scoped lang="scss">
.fill-q {
  .index {
    margin-right: 1vw;
  }
  .content {
    padding: 1vw;
  }
  .title {
    font-size: 1.25rem;
  }
  .remark {
    font-size: 1rem;
    color: #999;
  }
  .edit {
    padding: 0 5vw;
  }
}
</style>
